<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="lib/vue-2.4.0.js"></script>

</head>

<body>

     <div id="app">
          <!-- 父组件再引用子组件时通过v-bind将数据传给子组件 -->
          <com1 :parentmsg='msg'></com1>
     </div>


     <script>
        

        var vm = new Vue({
             el : '#app',
             data : {
             msg :'父组件的数据' 
            },
            components:{
                'com1':{
                    data(){
                        return{
                            title:'子组件自己带标题'
                        }
                    },
                    template:'<h1 @click="change">子组件中的东西--{{ parentmsg }}</h1>',  // 子组件默认无法访问负组件中的东西
                    // props中的数据都是只读的 
                    props:['parentmsg'], // 把负组件传递过来的parentmsg现在props定义一下才能再子组件中使用
                    methods: {
                        change(){
                            this.parentmsg='被修改了' // props是只读的 data才是可读可写的
                        }
                    },
                }
            }
        }) 

     </script>

</body>

</html>